<template>
    <!-- 横向表格 -->
    <div class="across-table height100">
        <div class="flex height100 widtd100 across-table-content">
            <table border="1rem" cellpadding="0" cellspacing="0" class="height100 widtd100 ">
                <tr v-for="column, index in columns" :key="index">
                    <td class="table-header td-cell" v-if="column.child && showMore" :rowspan="column.child.rowspan"
                        :colspan="column.child.colspan">{{ column.child.name }}</td>
                    <td class="table-header td-cell" :rowspan="showMore && column.rowspan"
                        :colspan="showMore && column.colspan">{{ column.name }}</td>
                    <td class="td-cell" v-for="item in data[column.props]">{{ item }}</td>
                </tr>
                <!-- <tr> <td colspan="2">时间</td>  <td v-for="item in tableData.time">{{item}}</td></tr>
                <tr> <td colspan="2">频率MHz</td>  <td v-for="item in tableData.hz">{{item}}</td></tr>
                <tr> <td rowspan="4" v-if="showMore">多径</td><td>多径数量</td> <td v-for="item in tableData.hz">{{item}}</td></tr>
                <tr> <td>峰值dB</td> </tr>
                <tr> <td>峰值延时ms</td> </tr>
                <tr> <td>峰值频移Hz</td> </tr>
                <tr> <td rowspan="3" v-if="showMore">时延域</td><td>多径数延时ms</td> </tr>
                <tr> <td>复合多径扩展ms</td> </tr>
                <tr> <td>最大径内时延扩展ms</td> </tr>
                <tr> <td rowspan="4" v-if="showMore">多普勒域</td><td>多普勒偏移Hz</td> </tr>
                <tr> <td>复合多普勒扩展Hz</td> </tr>
                <tr> <td>最大径内多径延迟扩展Hz</td> </tr>
                <tr> <td>最大多普勒频移Hz</td> </tr>
                <tr> <td rowspan="4" v-if="showMore">相干</td><td>复合相干带宽Hz</td> </tr>
                <tr> <td>有效相干带宽Hz</td> </tr>
                <tr> <td>复合相干时间s</td> </tr>
                <tr> <td>有效相干时间s</td> </tr> -->
            </table>
            <!-- <table border="1" style="float: left;">
                <tr> <td v-for="item in tableData.time">{{item}}</td> </tr>
                <tr> <td v-for="item in tableData.hz">{{item}}</td> </tr>
                <tr> <td v-for="item in tableData.time1">{{item}}</td> </tr>
                <tr> <td v-for="item in tableData.hz2">{{item}}</td> </tr>
                <tr> <td v-for="item in tableData.time3">{{item}}</td> </tr>
                <tr> <td v-for="item in tableData.hz4">{{item}}</td> </tr>
                <tr> <td v-for="item in tableData.time">{{item}}</td> </tr>
                <tr> <td v-for="item in tableData.hz">{{item}}</td> </tr>
                <tr> <td v-for="item in tableData.time">{{item}}</td> </tr>
                <tr> <td v-for="item in tableData.hz">{{item}}</td> </tr>
                <tr> <td v-for="item in tableData.time">{{item}}</td> </tr>
                <tr> <td v-for="item in tableData.hz">{{item}}</td> </tr>
                <tr> <td v-for="item in tableData.time">{{item}}</td> </tr>
                <tr> <td v-for="item in tableData.hz">{{item}}</td> </tr>
                <tr> <td v-for="item in tableData.time">{{item}}</td> </tr>
                <tr> <td v-for="item in tableData.hz">{{item}}</td> </tr>
                <tr> <td v-for="item in tableData.hz">{{item}}</td> </tr>
            </table> -->
            <!-- <div class="across-tdead flex-column height100">
                <div class="td-cell flex1">时间</div>
                <div class="td-cell flex1">频率MHz</div>
                <div class="flex12 flex">
                    <div class=" flex-column flex1" v-if="showMore">
                        <div class="td-cell flex1">多径</div>
                        <div class="td-cell flex1">时延域</div>
                        <div class="td-cell flex1">多普勒域</div>
                        <div class="td-cell flex1">相干</div>
                    </div>
                    <div class=" flex-column flex2">
                        <div class="td-cell flex1">多径数量</div>
                        <div class="td-cell flex1">峰值dB</div>
                        <div class="td-cell flex1">峰值延时ms</div>
                        <div class="td-cell flex1">峰值频移Hz</div>
                        <div class="td-cell flex1">多径数延时ms</div>
                        <div class="td-cell flex1">复合多径扩展ms</div>
                        <div class="td-cell flex1">最大径内时延扩展ms</div>
                        <div class="td-cell flex1">多普勒偏移Hz</div>
                        <div class="td-cell flex1">复合多普勒扩展Hz</div>
                        <div class="td-cell flex1">最大径内多径延迟扩展Hz</div>
                        <div class="td-cell flex1">最大多普勒频移Hz</div>
                        <div class="td-cell flex1">复合相干带宽Hz</div>
                        <div class="td-cell flex1">有效相干带宽Hz</div>
                        <div class="td-cell flex1">复合相干时间s</div>
                        <div class="td-cell flex1">有效相干时间s</div>
                    </div>
                </div>
            </div>
            <div class="across-tbody flex flex1">
                <div class="across-tr flex-column" v-for="index in 30">
                    <div class="td-cell flex1">0.5</div>
                    <div class="td-cell flex1">0.5</div>
                    <div class="td-cell flex1">0.5</div>
                    <div class="td-cell flex1">0.5</div>
                    <div class="td-cell flex1">0.5</div>
                    <div class="td-cell flex1">0.5</div>
                    <div class="td-cell flex1">0.5</div>
                    <div class="td-cell flex1">0.5</div>
                    <div class="td-cell flex1">0.5</div>
                    <div class="td-cell flex1">0.5</div>
                    <div class="td-cell flex1">0.5</div>
                    <div class="td-cell flex1">0.5</div>
                    <div class="td-cell flex1">0.5</div>
                    <div class="td-cell flex1">0.5</div>
                    <div class="td-cell flex1">0.5</div>
                    <div class="td-cell flex1">0.5</div>
                </div>
            </div> -->
        </div>
    </div>
</template>

<script>
export default {
    name: 'acrossTable',
    emits: [],
    computed: {
        showMore() {
            if (this.layout == 'one') return true;
            return false
        }
    },
    props: {
        layout: {},
        columns: { type: Array, default: () => [] },
        data: { type: Object, default: () => {} },
    },
    watch: {
    },
    data() {
        return {
            // // 树形表格配置
            // columns: [
            //     { props: 'time', name: '时间', colspan: 2 },
            //     { props: 'central', name: '频率MHz', colspan: 2 },
            //     { props: 'pek_num', name: '多径数量', child: { name: '多径', rowspan: 4 } },
            //     { props: '', name: '峰值dB' },
            //     { props: '', name: '峰值延时ms' },
            //     { props: '', name: '峰值频移Hz' },
            //     { props: 'multi_delay', name: '多径数延时ms', child: { name: '时延域', rowspan: 3 } },
            //     { props: 'complex_delay_spread', name: '复合多径扩展ms' },
            //     { props: 'max_delay_spread', name: '最大径内时延扩展ms' },
            //     { props: 'multi_doppler_offset', name: '多普勒偏移Hz', child: { name: '多普勒域', rowspan: 4 } },
            //     { props: 'complex_doppler_spread', name: '复合多普勒扩展Hz' },
            //     { props: '', name: '最大径内多径延迟扩展Hz' },
            //     { props: 'max_doppler_shift', name: '最大多普勒频移Hz' },
            //     { props: 'complex_co_bw', name: '复合相干带宽Hz', child: { name: '相干', rowspan: 4 } },
            //     { props: 'effect_co_bw', name: '有效相干带宽Hz' },
            //     { props: 'complex_co_time', name: '复合相干时间s' },
            //     { props: 'effect_co_time', name: '有效相干时间s' },
            // ],
            // 表格数据
            tableData: {
                time: [2014, 2015, null, '56465dsf5ds1fd56sf1'],
                hz: [null, 6000, 300, null],
                time1: [null, null, null, null],
                time2: [null, null, null, null],
                time3: [null, null, null, null],
                time4: [null, null, null, null]
            }
        }
    },
    created() {
    },
    mounted() {
    },
    methods: {
    }
}
</script>

<style lang="scss" scoped>
.table-header {
    background: rgba(0, 0, 0, 0.65);
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 700;
    color: #767676;
    text-align: left;
}

.across-table {
    width: 100%;
    position: relative;
    overflow: auto;
}

.across-tdead {
    background: rgba(0, 0, 0, 0.65);
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 700;
    color: #767676;
    line-height: 20px;
    text-align: left;
}

.td-cell {
    position: relative;
    // overflow: hidden;
    // white-space: nowrap;
    // text-overflow: ellipsis;
    box-sizing: border-box;
    // border-bottom: 1px solid rgba(87, 93, 115, 0.4);
    // border-right: 1px solid rgba(87, 93, 115, 0.4);
}

.across-table-content {
    position: absolute;
    overflow: auto;
}

.across-tbody {
    overflow: auto;
}
</style>